<template>
	<view>
		<view class="topstatis">
			<view class="topstatis-item">
				<view class="count">{{teamCount}}</view>
				<view class="text">团队人数（个）</view>
			</view>
			<view class="topstatis-item">
				<view class="count">{{teamAmount}}</view>
				<view class="text">推荐奖励（元）</view>
			</view>
		</view>
		<view class="myteam-list" v-for="item in list">
			<view class="myteam-list-item">
				<view class="cell01">
					<image src="../../static/usercenter/defaultimg.png"></image>
				</view>
				<view class="cell02">
					<view class="name">{{item.username}}</view>
					<view class="phone">{{item.mobile}}</view>
				</view>
				<view class="cell03" v-if="item.job_status == 1">
					<view class="date">{{item.createtime}}</view>
					<view class="reward">已入职</view>
				</view>
				<view class="cell03" v-else="item.job_status == -1">
					<view class="date">{{item.createtime}}</view>
					<view class="reward">未入职</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				teamCount: 0,
				teamAmount: 0,
				list: []
			}
		},
		onLoad() {
			this.getMyteam();
		},
		methods: {

			getMyteam() {
				let param = {
					page: 1
				};
				let that = this;
				this.$api.teamList(param).then(res => {

					if (res.code == 1) {

						that.teamAmount = res.data.amount;
						that.teamCount = res.data.count;
						that.list = res.data.list;
					}

					console.info(res)
				})
			},
		}
	}
</script>

<style lang="scss">
	.topstatis {
		display: flex;
		background: #12ADA9;
		height: 165rpx;
		padding-top: 55rpx;

		.topstatis-item {
			flex: 1;

			.count {
				text-align: center;
				font-size: 48rpx;
				color: #ffffff;
			}

			.text {
				text-align: center;
				font-size: 26rpx;
				color: #ffffff;
			}
		}
	}

	.myteam-list {
		.myteam-list-item {
			display: flex;
			padding-bottom: 40rpx;
			margin: 40rpx;
			border-bottom: 1rpx solid #EBEBEB;

			.cell01 {
				image {
					width: 83rpx;
					height: 83rpx;
					border-radius: 50%;
				}

				margin-right: 20rpx;
			}

			.cell02 {
				flex: auto;

				.name {
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 7rpx;
				}

				.phone {
					font-size: 26rpx;
					color: #666666;
				}
			}

			.cell03 {
				.date {
					font-size: 24rpx;
					color: #ADADAD;
				}

				.reward {
					color: #EC3535;
					font-size: 26rpx;
					text-align: right;
					margin-top: 19rpx;
				}
			}
		}
	}
</style>
